<template>
  <div>
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" class="form">
      <el-form-item prop="name">
        <el-select
            v-model="dataForm.name"
            class="input"
            placeholder="选择会议室"
            size="medium"
            clearable="clearable"
        >
          <el-option v-for="one in roomList" :label="one.name" :value="one.name"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="date">
        <el-date-picker
            v-model="dataForm.date"
            type="date"
            placeholder="选择日期"
            class="input"
            size="medium"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
        <el-button size="medium" type="danger" @click="addHandle()">会议申请</el-button>
      </el-form-item>
      <el-form-item class="mold">
        <el-radio-group v-model="dataForm.mold" size="medium" @change="changeHandle">
          <el-radio-button label="全部会议"></el-radio-button>
          <el-radio-button label="我的会议"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="gantt" ref="gantt" v-show="mode == 'gantt'">
      <div class="row">
        <div class="cell-time"></div>
        <div class="cell-time" v-for="one in time">
          <span class="time">{{ one }}</span>
        </div>
      </div>
      <div class="row" v-for="room in gantt.meetingRoom">
        <div class="cell room">{{ room.name }}</div>
        <div class="cell" v-for="one in time">
          <div
              v-if="room.meeting.hasOwnProperty(one)"
              class="meeting"
              :class="room.meeting[one].split('#')[1]"
              :style="'width:' + room.meeting[one].split('#')[0] * gantt.cellWidth + 'px'"
          ></div>
        </div>
      </div>
    </div>
    <el-pagination
        v-show="mode == 'gantt'"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
    />

    <div class="calendar" v-show="mode == 'calendar'">
      <div class="row">
        <div class="cell">时间</div>
        <div class="cell" v-for="one in calendar.days">{{ one.date }}（{{ one.day }}）</div>
      </div>
      <div class="row" v-for="(one, index) in time">
        <div class="cell-time" v-if="time[index + 1] != null">{{ one }} ~ {{ time[index + 1] }}</div>
        <div class="cell" v-for="day in calendar.days" v-if="time[index + 1] != null">
          <div
              class="meeting"
              v-if="calendar.map.hasOwnProperty(`${day.date}#${one}`)"
              :style="
							'height:' +
								calendar.map[day.date + '#' + one].time * 31 +
								'px; line-height:' +
								calendar.map[day.date + '#' + one].time * 31 +
								'px'
						"
              :ref="`${day.date}#${one}`"
              @click="
							infoHandle(calendar.map[day.date + '#' + one].id, calendar.map[day.date + '#' + one].status)
						"
          >
            <SvgIcon
                name="close"
                class="icon-svg-close"
                v-if="
								calendar.map[`${day.date}#${one}`].isCreator == 'true' &&
									[1, 3].includes(calendar.map[`${day.date}#${one}`].status)
							"
                @click.stop="deleteHandle(`${day.date}#${one}`)"
            />
            {{ calendar.map[`${day.date}#${one}`].title }}
          </div>
        </div>
      </div>
    </div>
    <add v-if="addVisible" ref="add" @refresh="refresh"></add>
    <info v-if="infoVisble" ref="info"></info>
  </div>
</template>

<script>
import SvgIcon from '../components/SvgIcon.vue';
import dayjs from 'dayjs';
import Add from './offline_meeting-add.vue';
import Info from './offline_meeting-info.vue';

export default {
  components: {SvgIcon, Add, Info},
  data: function () {
    return {
      time: [
        '08:30',
        '09:00',
        '09:30',
        '10:00',
        '10:30',
        '11:00',
        '11:30',
        '12:00',
        '12:30',
        '13:00',
        '13:30',
        '14:00',
        '14:30',
        '15:00',
        '15:30',
        '16:00',
        '16:30',
        '17:00',
        '17:30',
        '18:00',
        '18:30'
      ],
      gantt: {
        meetingRoom: [],
        cellWidth: 0
      },
      calendar: {
        map: {},
        days: []
      },
      roomList: [],
      dataForm: {
        name: null,
        date: null,
        mold: '全部会议'
      },
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      dataListLoading: false,
      addVisible: false,
      infoVisble: false,
      dataRule: {},
      mode: 'gantt'
    };
  },
  methods: {
    backHandle: function () {
      let that = this;
      that.mode = 'gantt';
    },
    loadDataList: function () {
      let that = this;
      that.dataListLoading = true;
      let data = {
        name: that.dataForm.name,
        mold: that.dataForm.mold,
        page: that.pageIndex,
        length: that.pageSize
      };
      if (that.dataForm.date == null || that.dataForm.date == '') {
        data.date = dayjs(new Date()).format('YYYY-MM-DD');
      } else {
        data.date = dayjs(that.dataForm.date).format('YYYY-MM-DD');
      }
      that.$http('meeting/searchOfflineMeetingByPage', 'POST', data, true, function (resp) {
        let page = resp.page;
        let temp = [];
        for (let room of page.list) {
          let json = {};
          json.name = room.name;
          json.meeting = {};
          if (room.hasOwnProperty('meeting')) {
            for (let meeting of room.meeting) {
              let color;
              if (meeting.status == 1) {
                color = 'yellow';
              } else if (meeting.status == 3) {
                color = 'blue';
              } else if (meeting.status == 4) {
                color = 'pink';
              } else if (meeting.status == 5) {
                color = 'gray';
              }
              json.meeting[meeting.start] = meeting.time + '#' + color;
            }
          }
          temp.push(json);
        }
        that.gantt.meetingRoom = temp;
        that.totalCount = page.totalCount;
        that.dataListLoading = false;
      });
    },
    searchHandle: function () {
      let that = this;
      //查询甘特图数据
      if (that.dataForm.name == null || that.dataForm.name == '') {
        that.$refs['dataForm'].validate(valid => {
          if (valid) {
            that.$refs['dataForm'].clearValidate();
            that.dataForm.name = null;
            if (that.pageIndex != 1) {
              that.pageIndex = 1
            }
            that.loadDataList();
            that.mode = 'gantt';
          } else {
            return false;
          }
        });
      }
      //查询周日历数据
      else {
        that.$refs['dataForm'].validate(valid => {
          if (valid) {
            that.$refs['dataForm'].clearValidate();
            let data = {
              name: that.dataForm.name,
              mold: that.dataForm.mold
            };
            //日历控件的值默认为null,有具体日期的日历被清除日期之后，值为空字符串
            if (that.dataForm.date != null && that.dataForm.date != '') {
              data.date = dayjs(that.dataForm.date).format('YYYY-MM-DD');
            }
            that.$http('meeting/searchOfflineMeetingInWeek', 'POST', data, true, function (resp) {
              let map = {};
              //视图层输出会议卡片做判断遍历数组太麻烦，所以把周日历数据从数组转换成JSON对象
              for (let one of resp.list) {
                map[`${one.date}#${one.start}`] = one;
              }
              that.calendar.map = map;
              //周日历表头标题
              that.calendar.days = resp.days;
              that.mode = 'calendar';
            });
          } else {
            return false;
          }
        })
      }
    },
    changeHandle: function () {
      this.searchHandle();
    },
    sizeChangeHandle: function (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.loadDataList();
    },
    currentChangeHandle: function (val) {
      this.pageIndex = val;
      this.loadDataList();
    },
    addHandle: function () {
      this.addVisible = true;
      this.$nextTick(() => {
        this.$refs.add.init();
      });
    },
    refresh: function () {
      this.mode = 'gantt';
      this.$refs['dataForm'].resetFields();
      this.loadDataList();
    },
    infoHandle: function (id, status) {
      this.infoVisble = true;
      this.$nextTick(() => {
        this.$refs.info.init(id, status);
      })
    },
    deleteHandle: function (key) {
      let that = this;
      that.$confirm('是否删除该会议？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let json = that.calendar.map[key];
        let data = {
          id: json.id,
          uuid: json.uuid,
          instanceId: json.instanceId,
          reason: '删除会议'
        };
        that.$http('meeting/deleteMeetingApplication', 'post', data, true, function (resp) {
          if (resp.rows == 1) {
            that.$message({
              message: '删除成功',
              type: 'success',
              duration: 1200
            });
            that.searchHandle();
          } else {
            that.$message({
              message: '删除失败',
              type: 'error',
              duration: 1200
            });
          }
        });
      });
    },
  },
  mounted: function () {
    let that = this
    //根据实际情况设置甘特图每个单元格应该有的宽度
    let rowWidth = that.$refs['gantt'].offsetWidth - 1;
    let cellWidth = rowWidth * 0.042 + 0.01;
    that.gantt.cellWidth = cellWidth;

    //当浏览器窗口尺寸改变的时候，重新设置甘特图单元格的宽度
    window.addEventListener('resize', () => {
      let rowWidth = that.$refs['gantt'].offsetWidth - 1;
      let cellWidth = rowWidth * 0.042 + 0.01;
      that.gantt.cellWidth = cellWidth;
    })
  },
  created: function () {

    let that = this;
    //加载会议室列表
    that.$http('meeting_room/searchAllMeetingRoom', 'GET', null, true, function (resp) {
      that.roomList = resp.list;
    });
    //加载分页数据
    that.loadDataList();
  }

};
</script>

<style lang="less" scoped="scoped">
@import url('offline_meeting.less');
</style>
